<template>
  <div class="">
    <el-dialog
      title="修改个人信息"
      :visible.sync="personDialogVisible"
      width="30%"
      center
    >
      <el-form
        ref="personForm"
        :rules="personRules"
        :model="personForm"
        label-width="80px"
      >
        <el-form-item label="名字" prop="name">
          <el-col :span="20">
            <el-input v-model="personForm.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-col :span="20">
            <el-input v-model="personForm.age"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="personForm.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-col :span="20">
            <el-input v-model="personForm.phone"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="personDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePersonChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Person',
  data() {
    let checkAge = (rule, value, callback) => {
      if (value > 150) {
        callback(new Error('年龄输入过大'))
      } else {
        callback()
      }
    }
    return {
      user: JSON.parse(localStorage.getItem('curUser')) || {},
      personDialogVisible: false,
      personForm: {
        id: '',
        name: '',
        age: '',
        phone: '',
        sex: '男'
      },
      personRules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur' },
          {
            pattern: /^([1-9][0-9]*){1,3}$/,
            message: '年龄必须为正整数字',
            trigger: 'blur'
          },
          { validator: checkAge, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handlePersonChange() {
      this.$refs.personForm.validate(valid => {
        if (valid) {
          this.$http.post('/user/update', this.personForm).then(res1 => {
            console.log(res1)
            if (res1.code == 200) {
              this.$message.success('修改个人信息成功！')
              this.personDialogVisible = false

              this.$http.get('/user/findByNo?no=' + this.user.no).then(res2 => {
                if (res2.code === 200) {
                  localStorage.setItem('curUser', JSON.stringify(res2.data[0]))
                  this.$router.go(0)
                } else {
                  this.$message.error('更新个人信息失败！')
                }
              })
            } else {
              this.$message.error('修改个人信息失败！')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    personChange() {
      this.personDialogVisible = true

      this.$nextTick(() => {
        //赋值到表单
        this.personForm.id = this.user.id
        this.personForm.name = this.user.name
        this.personForm.age = this.user.age + ''
        this.personForm.sex = this.user.sex + ''
        this.personForm.phone = this.user.phone
      })
    }
  }
}
</script>

<style scoped></style>
